<template>
  <div>
    <div class="header">
      <vy-theme-header
        :tag="6"
        :ischild="true"
        :projectid="projectId"
      ></vy-theme-header>
    </div>
    <div class="detail-page">
      <mu-flex class="main" id="main">
        <div class="left">
          <mu-paper class="left-content">
            <div v-if="data.type === 1">
              <mu-carousel
                :active="active"
                class="img-carousel"
                @change="carouselChange"
              >
                <mu-icon
                  v-show="data.data && data.data.length > 1 && active !== 0"
                  value="arrow_back"
                  slot="left"
                ></mu-icon>
                <mu-icon
                  v-show="
                    data.data &&
                      data.data.length > 1 &&
                      active !== data.data.length - 1
                  "
                  value="arrow_forward"
                  slot="right"
                ></mu-icon>
                <template slot="indicator" slot-scope="{ index, active }">
                  <mu-button
                    icon
                    class="mu-carousel-indicator-button"
                    :class="{ 'mu-carousel-indicator-button__active': active }"
                    @click="changeActive(index)"
                  >
                    <span class="rect-indicator"></span>
                  </mu-button>
                </template>
                <mu-carousel-item
                  v-for="(item, index) in data.data"
                  :key="index"
                >
                  <img :src="baseImgUrl + item" />
                </mu-carousel-item>
                <!-- <mu-carousel-item>
                <img
                  src="https://image.xuexiwangzhe.com/FrML14eClg9vo-WB3tUM7d1PZPx0"
                />
              </mu-carousel-item>
              <mu-carousel-item>
                <img
                  src="https://image.xuexiwangzhe.com/FvxPBz6zosgYkWfcBL4W0Jage9v2"
                />
              </mu-carousel-item>
              <mu-carousel-item>
                <img
                  src="https://image.xuexiwangzhe.com/FvxPBz6zosgYkWfcBL4W0Jage9v2"
                />
              </mu-carousel-item> -->
              </mu-carousel>
              <mu-flex align-items="center" justify-content="center">
                <div
                  v-for="(item, index) in data.data"
                  :key="index"
                  :class="[
                    'img-select-item',
                    index === active ? 'img-select-item-active' : '',
                  ]"
                  @click="active = index"
                >
                  <img
                    :src="baseImgUrl + item"
                    :class="['img-select-item-img']"
                  />
                  <div class="img-select-item-block"></div>
                </div>
                <!-- <img
                src="https://image.xuexiwangzhe.com/FrML14eClg9vo-WB3tUM7d1PZPx0"
                class="img-select-item"
              />
              <img
                src="https://image.xuexiwangzhe.com/FvxPBz6zosgYkWfcBL4W0Jage9v2"
                class="img-select-item"
              />
              <img
                src="https://image.xuexiwangzhe.com/FvxPBz6zosgYkWfcBL4W0Jage9v2"
                class="img-select-item"
              /> -->
              </mu-flex>
            </div>
            <div v-if="data.type === 2">
              <video
                width="100%"
                class="video-player"
                :poster="data.ossImgUrl"
                controls
              >
                <source :src="data.ossUrl" />
                您的浏览器不支持Video标签。
              </video>
            </div>
            <div class="info">
              <h3 class="info-title">
                {{ data.content | title }}
              </h3>
              <div class="info-content">
                {{ data.content | content }}
              </div>
              <mu-flex align-items="center" justify-content="between">
                <mu-flex align-items="center" class="info-tip">
                  <mu-flex align-items="center" class="info-do-item">
                    <img
                      v-if="data.isPraise === 0"
                      src="https://image.xuexiwangzhe.com/FmemMc4Qz7vmRy0Cwi2HNp3WiCuL"
                      class="info-do-img"
                      @click="praiseClick"
                    />
                    <img
                      v-if="data.isPraise === 1"
                      src="https://image.xuexiwangzhe.com/FlDlnacn3kJivD2PwAzbtZnUyfAa"
                      class="info-do-img"
                      @click="praiseClick"
                    />
                    <span>{{ data.supportNum }}</span>
                  </mu-flex>
                  <mu-flex align-items="center" class="info-do-item">
                    <img
                      src="https://image.xuexiwangzhe.com/FrDp3Lf8wo9xuQBWMD4a2gvxwCUd"
                      class="info-do-img"
                      @click.stop="commentClick"
                    />
                    <span>{{ data.commentNum }}</span>
                  </mu-flex>
                  <span>发布于 {{ data.sendTime | time }}</span>
                </mu-flex>
                <mu-flex align-items="center" class="info-operate">
                  <mu-button flat @click="stick">
                    <img
                      src="https://image.xuexiwangzhe.com/Fk9IuG4ANYr4wtB43PRizVdUuZ7L"
                      class="info-operate-img"
                    />
                    置顶
                  </mu-button>
                  <mu-button flat @click="deleteData">
                    <img
                      src="https://image.xuexiwangzhe.com/FpSB-sURnCNYwCU0DjHJo6HmYXYg"
                      class="info-operate-img"
                    />
                    删除
                  </mu-button>
                </mu-flex>
              </mu-flex>
              <div v-click-outside="commentClose" v-show="commentOpen">
                <mu-text-field
                  prop="name"
                  label="评论"
                  @pressEnter="submitComment"
                  label-float
                  v-model="commentContent"
                  style="width:400px;"
                ></mu-text-field>
                <mu-button
                  slot="actions"
                  flat
                  :disabled="!commentContent"
                  color="primary"
                  @click="submitComment"
                  >发送</mu-button
                >
              </div>
            </div>
          </mu-paper>
          <mu-paper
            class="left-comment"
            v-if="
              data.praiseLogs ||
                (data.lecturerComments && data.lecturerComments.length > 0) ||
                (data.comments && data.comments.length > 0)
            "
          >
            <div class="content">
              <mu-flex
                class="parise"
                align-items="center"
                v-if="data.praiseLogs"
              >
                <img
                  src="https://image.xuexiwangzhe.com/FlDlnacn3kJivD2PwAzbtZnUyfAa"
                  class="parise-img"
                />
                <span class="parise-content">{{
                  data.praiseLogs | praise
                }}</span>
              </mu-flex>
              <template
                v-if="data.lecturerComments && data.lecturerComments.length > 0"
                v-for="(item, index) in data.lecturerComments"
              >
                <mu-divider
                  class="comment-divider"
                  :key="item.id + index + 1"
                ></mu-divider>
                <mu-flex
                  :key="item.id"
                  class="comment"
                  align-items="center"
                  justify-content="between"
                >
                  <mu-flex align-items="center">
                    <img
                      src="https://image.xuexiwangzhe.com/FjVhJdOcYs6OdTJgmNKEP1K-yyKZ"
                      class="comment-img"
                    />
                    <span v-if="item.roleId === 1" class="comment-content"
                      >讲师点评：</span
                    >
                    <span v-if="item.roleId === 3" class="comment-content"
                      >领导点评：</span
                    >
                    <span v-if="item.roleId === 2" class="comment-content"
                      >班主任点评：</span
                    >
                    <span>{{ item.content }}</span>
                  </mu-flex>
                  <img
                    class="delete-img"
                    @click="commentDelete(item.id, index, item.roleId)"
                    src="https://image.xuexiwangzhe.com/FkqaDGl4zEC9DuI-LnlFnFSyP360"
                  />
                </mu-flex>
              </template>
              <template
                v-if="data.comments && data.comments.length > 0"
                v-for="(item, index) in data.comments"
              >
                <mu-divider
                  class="comment-divider"
                  :key="item.id + index + 1"
                ></mu-divider>
                <mu-flex
                  class="comment"
                  align-items="center"
                  justify-content="between"
                  :key="item.id"
                >
                  <mu-flex align-items="center">
                    <img
                      src="https://image.xuexiwangzhe.com/FuW5DzyZjRKwGTu8alS7kH_hPKYZ"
                      class="comment-img"
                    />
                    <span class="comment-content">{{ item.userName }}：</span>
                    <span>{{ item.content }}</span>
                  </mu-flex>
                  <img
                    class="delete-img"
                    @click="commentDelete(item.id, index, item.roleId)"
                    src="https://image.xuexiwangzhe.com/FkqaDGl4zEC9DuI-LnlFnFSyP360"
                  />
                </mu-flex>
              </template>
              <!-- <mu-divider></mu-divider>
              <mu-flex
                class="comment"
                align-items="center"
                justify-content="between"
              >
                <mu-flex class="comment-next" align-items="center">
                  <span class="comment-content">郑建：</span>
                  <span>有时候灵感就是那么妙不可言。</span>
                </mu-flex>
                <img
                  class="delete-img"
                  src="https://image.xuexiwangzhe.com/FkqaDGl4zEC9DuI-LnlFnFSyP360"
                />
              </mu-flex> -->
            </div>
          </mu-paper>
        </div>
        <div>
          <mu-paper class="user">
            <div class="tag">
              <img
                src="https://image.xuexiwangzhe.com/FlpduZgD6FVBcCiFQjB3YcOFq9sS"
                class="tag-img"
              />
              <span v-if="data.roleId === 1" class="tag-content">
                讲师
              </span>
              <span v-else-if="data.roleId === 2" class="tag-content">
                班主任
              </span>
              <span v-else-if="data.roleId === 3" class="tag-content">
                领导
              </span>
              <span v-else class="tag-content">
                学员
              </span>
            </div>
            <mu-flex align-items="center" class="info">
              <mu-avatar size="60" class="info-avatar">
                <img :src="baseImgUrl + data.userAvatar" />
              </mu-avatar>
              <div>
                <h4 class="info-name">{{ data.nickName }}</h4>
                <span class="info-content">{{ data.signature }}</span>
              </div>
            </mu-flex>
            <mu-divider></mu-divider>
            <mu-flex
              class="data"
              align-items="center"
              justify-content="between"
            >
              <div class="data-item">
                <mu-flex align-items="center" class="data-item-top">
                  <img
                    src="https://image.xuexiwangzhe.com/FiBdURgZTFGKlcKr9v7Vk7NzMpdg"
                    class="data-item-img"
                  />
                  <span>发表</span>
                </mu-flex>
                <span>{{ data.publishTotalNum }}</span>
              </div>
              <div class="data-item">
                <mu-flex align-items="center" class="data-item-top">
                  <img
                    src="https://image.xuexiwangzhe.com/FrEdsw6_rATt0ZGvJQxv79TNIaGt"
                    class="data-item-img"
                  />
                  <span>点赞</span>
                </mu-flex>
                <span>{{ data.supportTotalNum }}</span>
              </div>
              <div class="data-item">
                <mu-flex align-items="center" class="data-item-top">
                  <img
                    src="https://image.xuexiwangzhe.com/FvJ_u-YsHup_8SJM66gAmDBPeP4p"
                    class="data-item-img"
                  />
                  <span>评论</span>
                </mu-flex>
                <span>{{ data.commentTotalNum }}</span>
              </div>
            </mu-flex>
          </mu-paper>
          <mu-paper class="more">
            <mu-button
              v-loading="moreLoading"
              data-mu-loading-color="#3366ff"
              flat
              class="change-data"
              @click="changeData"
            >
              <img
                src="https://image.xuexiwangzhe.com/FgOMSzfnrOeAsk0DLg_zhRwkj1OR"
                class="change-data-img"
              />
              换一批
            </mu-button>
            <h4 class="title">更多瞬间</h4>
            <div v-loading="moreLoading" data-mu-loading-color="#3366ff">
              <mu-flex
                v-for="item in moreData"
                :key="item.id"
                class="item"
                @click="moreItemClick(item.id)"
                align-items="center"
              >
                <div class="item-pic">
                  <img :src="baseImgUrl + item.cover" class="item-img" />
                  <img
                    v-if="item.type === 1"
                    src="https://image.xuexiwangzhe.com/Fl1PBQLTGno1rt5uO-VsgpmcYFSq"
                    class="item-type-img"
                  />
                  <img
                    v-if="item.type === 2"
                    src="https://image.xuexiwangzhe.com/FgOZ0JHEQaLMnaexZxfdiD7RuKEs"
                    class="item-type-img"
                  />
                </div>
                <div class="item-main">
                  <span class="item-content">{{ item.content }}</span>
                  <mu-flex align-items="center" justify-content="between">
                    <mu-flex align-items="center">
                      <mu-avatar size="35" class="item-avatar">
                        <img :src="baseImgUrl + item.userAvatar" />
                      </mu-avatar>
                      <span class="item-name">{{ item.nickName }}</span>
                    </mu-flex>
                    <mu-flex align-items="center">
                      <img
                        src="https://image.xuexiwangzhe.com/FrEdsw6_rATt0ZGvJQxv79TNIaGt"
                        class="item-parise-img"
                      />
                      <span>{{ item.supportNum }}</span>
                    </mu-flex>
                  </mu-flex>
                </div>
              </mu-flex>
            </div>
          </mu-paper>
        </div>
      </mu-flex>
    </div>
  </div>
</template>

<script>
import VyHeader from "../../../components/theme-header.vue";
export default {
  filters: {
    title(value) {
      if (!value) return "";
      return value.substr(0, 8);
    },
    content(value) {
      if (!value) return "";
      return value.substring(8);
    },
    time(value) {
      if (!value) return "";
      return value.replace(/\//g, "-");
    },
    praise(value) {
      if (!value) return "";
      for (let j = 0; j < value.length; j++) {
        value[j] = unescape(value[j].replace(/\\/g, "%"));
      }
      return value.join("、");
    },
  },
  data() {
    return {
      active: 0,
      id: "",
      projectId: "",
      data: {},
      commentOpen: false,
      commentContent: "",
      moreData: [],
      moreLoading: false,
      baseImgUrl: "https://image.xuexiwangzhe.com/",
    };
  },
  components: {
    [VyHeader.name]: VyHeader,
  },
  created() {
    this.id = this.$route.params.id;
    this.projectId = this.$route.query.projectId;
    this.initData();
  },
  methods: {
    initData() {
      this.getData();
      this.getMoreData();
    },
    praiseClick() {
      const params = {
        itemType: 14,
        id: this.id,
        projectId: this.projectId,
        moduleId: 0,
        SESSIONKEY: sessionStorage.getItem("SESSIONKEY"),
      };
      this.$axios.post("/praiselog/praise", params).then((res) => {
        if (res.success) {
          if (this.data.isPraise === 0) {
            this.data.isPraise = 1;
            this.data.supportNum += 1;
            this.data.supportTotalNum += 1;
          } else {
            this.data.isPraise = 0;
            this.data.supportNum -= 1;
            this.data.supportTotalNum -= 1;
          }

          if (res.praiseUserNameList) {
            this.data.praiseLogs = res.praiseUserNameList;
          } else {
            this.data.praiseLogs = "";
          }
        }
      });
    },
    moreItemClick(id) {
      this.id = id;
      this.initData();
    },
    commentClose() {
      if (this.commentOpen) {
        this.commentOpen = false;
      }
    },
    commentClick() {
      this.commentOpen = true;
    },
    submitComment() {
      if (!this.commentContent) return;
      const params = {
        itemType: 14,
        id: this.id,
        projectId: this.projectId,
        moduleId: 0,
        content: this.commentContent,
        replyId: 0,
        replyName: 0,
        weight: 0,
        SESSIONKEY: sessionStorage.getItem("SESSIONKEY"),
      };
      this.$axios.post("/comment/comment", params).then((res) => {
        if (res.success) {
          this.$toast.success("评论成功");
          const comment = res.comment;
          if (
            this.data.roleId === 1 ||
            this.data.roleId === 2 ||
            this.data.roleId === 3
          ) {
            if (this.data.lecturerComments) {
              this.data.lecturerComments.push(comment);
            } else {
              this.data.lecturerComments = [comment];
            }
          } else {
            if (this.data.comments) {
              this.data.comments.push(comment);
            } else {
              this.data.comments = [comment];
            }
          }
          if (this.data.commentNum) {
            this.data.commentNum += 1;
          } else {
            this.data.commentNum = 1;
          }
          if (this.data.commentTotalNum) {
            this.data.commentTotalNum += 1;
          } else {
            this.data.commentTotalNum = 1;
          }
          this.commentContent = "";
          this.commentOpen = false;
        } else {
          this.$toast.error(res.msg);
        }
      });
    },
    changeActive(index) {
      this.active = index;
    },
    changeData() {
      this.getMoreData();
    },
    stick() {
      const params = {
        id: this.id,
        projectId: this.projectId,
        SESSIONKEY: sessionStorage.getItem("SESSIONKEY"),
      };
      this.$axios.post("/momentcontent/stick", params).then((res) => {
        if (res.success) {
          this.$toast.success("置顶成功");
        } else {
          this.$toast.error(res.msg);
        }
      });
    },
    carouselChange(index) {
      this.active = index;
    },
    commentDelete(id, index, roleId) {
      const params = {
        id,
        projectId: this.projectId,
        moduleId: 0,
        SESSIONKEY: sessionStorage.getItem("SESSIONKEY"),
      };
      this.$axios.post("/comment/delete", params).then((res) => {
        if (res.success) {
          if (roleId !== 1 && roleId !== 2 && roleId !== 3) {
            this.data.comments.splice(index, 1);
          } else {
            this.data.lecturerComments.splice(index, 1);
          }
          this.$toast.success("删除成功");
        } else {
          this.$toast.error(res.msg);
        }
      });
    },
    deleteData() {
      const params = {
        id: this.id,
        projectId: this.projectId,
        SESSIONKEY: sessionStorage.getItem("SESSIONKEY"),
      };
      this.$axios.post("/momentcontent/delete", params).then((res) => {
        if (res.success) {
          this.$toast.success("删除成功");
          history.go(-1);
        } else {
          this.$toast.error(res.msg);
        }
      });
    },
    getMoreData() {
      this.moreLoading = true;
      const params = {
        projectId: this.projectId,
        momentContentId: this.id,
        size: 8,
      };
      this.$axios.get("/momentcontent/batchList", { params }).then((res) => {
        if (res.success) {
          const result = res.momentContentVoPage;
          if (result) {
            this.moreData = result;
          }
        }
        this.moreLoading = false;
      });
    },
    getData() {
      const params = {
        projectId: this.projectId,
        id: this.id,
        from: 1,
        SESSIONKEY: sessionStorage.getItem("SESSIONKEY"),
      };
      this.$axios.get("/momentcontent/detail", { params }).then((res) => {
        if (res.success) {
          this.data = res.momentContentVo;
        }
      });
    },
  },
};
</script>
<style lang="less">
.detail-page {
  width: 100%;
  min-height: 100%;

  .main {
    padding-top: 40px;
    width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }

  .left {
    margin-right: 20px;
  }

  .left-content {
    width: 750px;
    box-shadow: 2px 5px 7px 0px rgba(197, 197, 197, 0.2);
    margin-bottom: 20px;
    border-radius: 12px;

    .img-carousel,
    .video-player {
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      height: 450px;
      margin-bottom: 20px;
    }

    .video-player {
      margin-bottom: 0;
    }

    .img-select-item {
      &:last-child {
        margin-right: 0;
      }
      &:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #d8d8d8;
        border-radius: 2px;
        opacity: 0.5;
      }
      position: relative;
      cursor: pointer;
      overflow: hidden;
      width: 80px;
      margin-right: 15px;
      border-radius: 2px;
    }

    .img-select-item-img {
      width: 100%;
      border-radius: 2px;
    }

    .img-select-item-active {
      border: 3px solid #3668ff;
      &:after {
        display: none;
      }
    }

    .info {
      padding: 20px;
    }

    .info-title {
      font-size: 18px;
    }

    .info-content {
      color: #4f4f4f;
      line-height: 20px;
      margin-bottom: 15px;
    }

    .info-tip {
      color: #acacac;
    }

    .info-do-item {
      margin-right: 30px;
    }

    .info-do-img {
      cursor: pointer;
      margin-right: 10px;
      width: 15px;
    }

    .info-operate {
      color: #4f4f4f;
    }

    .info-operate-img {
      margin-right: 10px;
      width: 15px;
    }
  }

  .left-comment {
    box-shadow: 2px 5px 7px 0px rgba(197, 197, 197, 0.2);
    border-radius: 12px;
    padding: 30px;
    width: 750px;

    .content {
      background-color: #f2f2f5;
      padding-left: 15px;
      padding-right: 15px;
    }

    .comment-divider {
      background-color: #fff;
    }

    .parise,
    .comment {
      padding-top: 12px;
      padding-bottom: 12px;
    }

    .parise-img,
    .comment-img {
      margin-right: 10px;
      width: 15px;
    }

    .parise-content,
    .comment-content {
      color: #5a6e96;
    }

    .delete-img {
      cursor: pointer;
      width: 13px;
    }

    .comment-next {
      padding-left: 25px;
    }
  }

  .user {
    position: relative;
    width: 350px;
    box-shadow: 2px 5px 7px 0px rgba(197, 197, 197, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    .tag {
      position: absolute;
      top: 0;
      right: 20px;
      text-align: center;
      color: #3366ff;
    }

    .tag-img {
      width: 40px;
    }
    .tag-content {
      position: absolute;
      top: 5px;
      left: 0;
      width: 100%;
    }

    .info {
      margin-bottom: 20px;
    }

    .info-avatar {
      margin-right: 10px;
    }

    .info-name {
      color: #4a618d;
      font-size: 18px;
    }
    .info-content {
      color: #4f4f4f;
    }

    .data {
      padding-top: 20px;
      padding-left: 10px;
      padding-right: 10px;
    }
    .data-item {
      text-align: center;
    }

    .data-item-top {
      margin-bottom: 15px;
    }

    .data-item-img {
      width: 15px;
      margin-right: 10px;
    }
  }

  .more {
    position: relative;
    width: 350px;
    padding-top: 20px;
    padding-bottom: 20px;
    box-shadow: 2px 5px 7px 0px rgba(197, 197, 197, 0.2);
    border-radius: 12px;

    .change-data {
      position: absolute;
      top: 15px;
      right: 15px;
      color: #3366ff;
    }

    .change-data-img {
      width: 15px;
      margin-right: 10px;
    }

    .title {
      padding-left: 30px;
      padding-right: 30px;
      font-size: 18px;
      margin-bottom: 15px;
    }

    .item {
      padding: 10px 30px;
      margin-bottom: 20px;
      min-height: 130px;
      cursor: pointer;
      &:hover {
        background-color: #eee;
      }
    }

    .item-pic {
      position: relative;
      margin-right: 20px;
    }

    .item-main {
      flex: 1;
    }

    .item-img {
      width: 100px;
      border-radius: 8px;
    }

    .item-name {
      color: #000;
    }

    .item-type-img {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 22px;
    }

    .item-content {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      color: #4f4f4f;
      margin-bottom: 30px;
    }

    .item-avatar {
      margin-right: 10px;
    }

    .item-parise-img {
      width: 15px;
      margin-right: 10px;
    }
  }
}
</style>
